<template>
    <div :id="id">
        <div v-if="element.data.length == 1" :style="{overflow: 'hidden', width: element.style.width.pixel + 'px', height: element.style.height.pixel + 'px' }">
            <img draggable="false" :src="element.data[0].id ? getPreview(element.data[0]) : element.data[0].url" :style="{ objectFit: element.style.objectFit }" />
        </div>
        <div class="loopImg1Model" v-if="element.data.length > 1" draggable="false">
            <el-carousel :style="{ width: element.style.width.pixel + 'px', height: element.style.height.pixel + 'px' }">
                <el-carousel-item v-for="(item, index) in element.data" :key="index">
                    <img class="loop-img" :src="element.data[index].id ? getPreview(item) : item.url" draggable="false" />
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
import config from '@/js/util/config.js';
import register from '@/js/main/register.js';

export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {
            data: this.element.data
        };
    },
    created() {
        register.addComponent(this);
    },
    destroyed() {
        register.removeComponent(this);
    },
    methods: {
        getPreview(data) {
            if (this.mode === 3) {
                return `/image/${data.id}.${data.filetype}`;
            } else {
                return data.url ? `${config.getServiceURL('scene')}service/scene/file/download?file=${data.url}` : `src/image/main/toolbar/logo.svg`;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
img {
    width: 100%;
    height: 100%;
    display: block;
}
.loopImg1Model {
    ::v-deep .el-carousel__container {
        height: 100%;
    }
    .loop-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
</style>